<template>
  <div class="login-container">
    <div class="login-box">
      <el-form ref="loginFormRef" :model="loginForm" :rules=" loginFormRules">
        <img src="./logo_index.png" alt />
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
          <i slot="prefix" class="iconfont icon-shoujihao"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入校验码">
          <i slot="prefix" class="iconfont icon-yanzhengma"></i>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align:left" prop="xieyi">
          <el-checkbox v-model="loginForm.xieyi" style="margin-right:10px;"></el-checkbox>
          <span>我已阅读并同意用户协议和隐私条款</span>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width:100%;"
            :loading="isActive"
            :disabled="isActive"
            type="primary"
            @click="login()"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '@/assets/js/gt.js'
import '@/assets/iconfont/iconfont.css'
export default {
  data () {
    // 自定义协议方法
    var xieyiTest = function (rule, value, callback) {
      // rule 验证规则 一般不用
      // value 当前被验证的信息
      // callbcak 回调函数 验证成功或失败都执行
      if (value) {
        callback()
      } else {
        return callback(new Error('请遵守规则'))
      }
    }

    return {
      loginForm: {
        mobile: '13788888888', // 手机号
        code: '246810', // 验证码
        xieyi: false // 协议
      },
      isActive: false, // 按钮是否等待 禁用
      // 创建data成员obj
      ctaObj: null,

      // 登陆验证
      loginFormRules: {
        mobile: [
          { required: true, message: '手机号码必填' },
          { pattern: /^1[35789]\d{9}$/, message: '手机号码格式不对' }
        ], // 手机号
        code: [{ required: true, message: '验证码必填' }], //
        xieyi: [{ validator: xieyiTest }]
      }
    }
  },

  methods: {
    login () {
      // 全部表单域项目验证
      // 获得form表单组件的语句：this.$refs.loginFormRef
      // form组件.validate(回调函数)
      // 参数 valid 体现布尔值 表示验证是否成功
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          // 极验对象存在就调用
          if (this.ctaObj !== null) {
            return this.ctaObj.verify()
          }
          this.isActive = true // 登陆按钮处于等待 禁用状态
          // return false
          // A axios获取极验请求密钥信息
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          // let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then(result => {
              // 服务端返回极验请求的密钥信息
              // console.log(result)
              // 对象解构赋值
              let { data } = result.data
              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest(
                {
                  // 以下配置参数来自服务端 SDK
                  gt: data.gt,
                  challenge: data.challenge,
                  offline: !data.success,
                  new_captcha: true,
                  product: 'bind'
                },
                captchaObj => {
                  // 这里可以调用验证实例 captchaObj 的实例方法
                  captchaObj
                    .onReady(() => {
                      // 验证码ready之后才能调用verify方法显示验证码

                      captchaObj.verify() // 显示验证码窗口
                      this.ctaObj = captchaObj
                      this.isActive = false // 把已经极验的对象赋予给catobj
                    })
                    .onSuccess(() => {
                      // your code
                      // B. 校验账号真实性，登录
                      this.loginAct()
                    })
                    .onError(() => {
                      // your code
                    })
                }
              )
              this.isActive = false // 恢复按钮
            })
            .catch(err => {
              return this.$message.error('获得极验初始验证信息错误' + err)
            })
        }
      })
    },
    // 账号验证 登陆后台
    loginAct () {
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 客户端记录用户信息
            window.sessionStorage.setItem(
              'userinfo',
              JSON.stringify(result.data.data)
            )
            // 进入后台系统
            this.$router.push('/home')
          }
        })
        .catch(err => {
          return this.$message.error('用户名或密码错误' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  background-color: skyblue;
  background-image: url("./login_bg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 410px;
    height: 340px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img {
      width: 50%;
      margin: 20px auto;
    }
    .el-form {
      width: 75%;
    }
  }
}
</style>
